<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .test_block {
      width: 100%;
      background-color: orange;
      color: aliceblue;
      font-weight: 700;
      font-size: 30px;
      text-align: center;
      line-height: 100px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
<img id="myImg" style="display: none; width: 200px; height: 100px;">
<div class="test_block" id="message">弹出消息</div>
<div class="test_block" id="photo">拍照</div>
<div class="test_block" id="keyboard">弹出键盘</div>



<script>
  // 封装的jsBridge
  window.jsBridge = window.jsBridge || {}

  window.jsBridge.call = function (methodName, params, callBack) {
    // 全局的唯一方法名
    const winName = `win_func_${~~((Math.random() * 1000))}`

    // 定义一个全局的函数
    window[winName] = function (...args) {
      // 判断是否有回调
      if (callBack) {
        callBack(...args)
      }
      // 最后删除这个方法
      delete window[winName]

    }
    if(window.harmonyOS && window.harmonyOS[methodName]) {
      // 调用sdk的方法
      harmonyOS[methodName](params, winName)
    }
  }

</script>

<script>
  // jsBridge.call('takePhoto', (url) => {

  // })

  document.querySelector('#message').onclick = () => {
    // harmonyOS是原生端定义的name名称  showMessage是原生端定义的方法名
    // harmonyOS.showMessage('使用jsBridge方式h5端给原生传递的消息')

    // 使用封装的jsBridge调用
    jsBridge.call('showMessage', '使用jsBridge方式h5端给原生传递的消息', () => {})
  }
  document.querySelector('#photo').onclick = () => {
    // harmonyOS.takePhoto('text')


    // 使用封装的jsBridge调用
    jsBridge.call('takePhoto', null, (url) => {
      document.querySelector('#message').innerHTML = url
      // 由于模拟器不支持拍照  使用的是选择图库的照片测试的  所以这里的url是选择的图片地址的数组
      if (url.length) {
        document.querySelector('#myImg').src = url
        document.querySelector('#myImg').style.display = 'block'
      }
    })
  }
  document.querySelector('#keyboard').onclick = () => {}

  // 原生端调用该方法
  function text(url) {
    // document.querySelector('#message').style.backgroundColor = 'blue'
    document.querySelector('#message').innerHTML = url
    // 由于模拟器不支持拍照  使用的是选择图库的照片测试的  所以这里的url是选择的图片地址的数组
    if (url.length) {
      document.querySelector('#myImg').src = url
      document.querySelector('#myImg').style.display = 'block'
    }
  }

</script>
</body>
</html>